<template>
    <div>
        <global-tables
                :total="total"
                :list="list"
                :loading="loading"
                :columns="columns"
                :current="search.Page"
                @changePage="handleChangePage"
                @handleAllSelect="handleAllSelect"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div></div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword"
                                   placeholder="请输入标题">
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
        <view-approval
                v-if="isViewApproval"
                :type="'view'"
                :id="itemId"
                :isApproval="isViewApproval"
                @handleCloseViewApproval="handleCloseViewApproval"
                @handleSubmit="handleSubmit"
        ></view-approval>
    </div>
</template>

<script>
    /**
     * 我的审批
     */
    import {cyclicRouting} from '@/util';
    import {getModulePermission} from '@/api/user';
    import {getTablesList, processingReview, setHaveRead} from './service';
    import GlobalTables from '@/components/GlobalTables';
    import ViewApproval from '@/components/ViewApproval';

    export default {
        name: 'FlowWait',
        components: {
            GlobalTables,
            ViewApproval
        },
        data() {
            return {
                list: [],
                cityList: [],
                itemId: 0,
                allSelectArr: null,
                loading: true,
                formItem: {},
                ruleValidate: {},
                isView: false,
                isModal: false,
                type: null,
                total: 0,
                isViewApproval: false,
                ModalTitle: '',
                search: {
                    keyword: '',
                    pageindex: 1,
                    pagesize: 10
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        key: 'Title'
                    },
                    {
                        title: '创建人',
                        key: 'ProPoserName'
                    },
                    {
                        title: '原因',
                        key: 'Reason'
                    },
                    {
                        title: '图片',
                        width: '100px',
                        render: (h, params) => {
                            const {UploadPic} = params.row;
                            if (UploadPic) {
                                return h('div', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-checkmark-circle-outline',
                                            color: '#1abc9c',
                                            size: '18'
                                        }
                                    })
                                ]);
                            } else {
                                return h('div', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-close-circle-outline',
                                            color: 'red',
                                            size: '18'
                                        }
                                    })
                                ]);
                            }
                        }
                    },
                    {
                        title: '文件',
                        width: '100px',
                        render: (h, params) => {
                            const {UploadFile} = params.row;
                            if (UploadFile) {
                                return h('div', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-checkmark-circle-outline',
                                            color: '#1abc9c',
                                            size: '18'
                                        }
                                    })
                                ]);
                            } else {
                                return h('div', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-close-circle-outline',
                                            color: 'red',
                                            size: '18'
                                        }
                                    })
                                ]);
                            }
                        }
                    },
                    {
                        title: '操作',
                        width: '100px',
                        align: 'center',
                        render: (h, params) => {
                            const {isView} = this;
                            return h('div', [
                                isView &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'info',
                                            size: 'small'
                                        },
                                        style: {
                                            background: '#5ab1ef',
                                            border: 'none',
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(params.row, 'view');
                                            }
                                        }
                                    },
                                    '查看'
                                ),
                            ]);
                        }
                    }
                ]
            };
        },
        methods: {
            /* 关闭对话框 */
            handleClose() {
                this.isModal = false;
            },
            /* 提交 */
            handleSubmit(type, mark) {
                const data = {
                    cid: this.itemId,
                    dispose: type == 'resolve' ? '1' : '2',
                    mark,
                };
                processingReview(data).then(res => {
                    if (res.state == 'success') {
                        this.$Message.success('操作成功');
                        this.loading = true;
                        this.isModal = false;
                        this.getTablesListData();
                        this.isViewApproval = false
                    } else {
                        this.$Message.error(res.message);
                        this.isViewApproval = false
                    }
                });
            },
            /* 关闭查看 */
            handleCloseViewApproval() {
                this.isViewApproval = false;
            },
            /* 表格数据请求 */
            getTablesListData() {
                const data = this.search;
                getTablesList(data).then(res => {
                    this.list = res.rows;
                    this.loading = false;
                    this.total = res.records;
                });
            },
            /* 表格查询 */
            handleSearch() {
                this.loading = true;
                this.getTablesListData();
            },
            /* 表格分页方法 */
            handleChangePage(type, page) {
                this.loading = true;
                if (type == 'page') {
                    this.search.pageindex = page;
                    this.getTablesListData();
                } else {
                    this.search.pagesize = page;
                    this.getTablesListData();
                }
            },
            /* 对话框 */
            handleBtnClick(item, type) {
                this.itemId = item.ID;
                if (type == 'view') {
                    this.isViewApproval = true;
                    setHaveRead({
                        fid: item.ID
                    })
                }
            },
            /* 表单数据 */
            initFormItem() {
                return {};
            },
            /* 复选框选中 */
            handleAllSelect(list) {
                let arr = [];
                for (let item in list) {
                    arr.push(list[item].ID);
                    arr.join(',');
                }
                arr = arr.join(',');
                this.allSelectArr = arr;
            }
        },
        mounted() {
            /* 获取菜单的id */
            cyclicRouting(JSON.parse(sessionStorage.getItem('user')).menuList, this.$route, id => {
                /* 按钮权限请求 */
                getModulePermission({
                    roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                    moduleid: id
                }).then(res => {
                    /* 按钮权限赋值 */
                    for (let item in res.data) {
                        if (res.data[item].name == 'view') {
                            this.isView = true;
                        }
                    }
                    /* 列表请求 */
                    this.getTablesListData();
                });
            });
        }
    };
</script>

<style>
</style>
